<template>
    <div>
        <fabric-canvas
             ref="canvas"
             v-model="canvas"
             :activeObjectId="activeObjectId"
             :height=200
             @mouseDown="addObjectL"
             @mouseUp="setAddingObjectL(false)"
             @mouseMove="mouseMove"
             @input="syncCanvasL">
        </fabric-canvas>
    </div>
</template>

<script>
import {mapState, mapActions} from 'vuex';

let state = {
    appHeaderState: {
        show: true,
        title: '它说',
        showMenu: true,
        showBack: false,
        showLogo: true,
        actions: [
            {
                icon: 'search',
                route: '/search'
            }
        ]
    },
    activateBottomNav: 'home'
};

function setState(store) {
    store.dispatch('appShell/appHeader/setAppHeader', state.appHeaderState);
    store.dispatch('appShell/appBottomNavigator/activateBottomNav', state.activateBottomNav);
    store.dispatch('appShell/appBottomNavigator/showBottomNav');
}

export default {
    name: 'home',
    computed: {
        ...mapState('appShell/fabricCanvas', [
          'activeObjectId',
          'canvas',
          'isAddingObject',
          'objects',
          'selectedTool'
        ])
    },
    async asyncData({store, route}) {
        setState(store);
    },
    activated() {
        setState(this.$store);
    },
    methods: {
        ...mapActions('appShell/fabricCanvas', [
            'syncCanvas',
            'setAddingObject',
            'addObject'
        ]),
        addObjectL(opts) {
          if(this.selectedTool === 'pointer')
            return;
          else {
            let newObject = {
                _uid: 'def',
                type: 'rect',
                originX: 'left',
                originY: 'top',
                left: 300,
                top: 100,
                width: 20,
                height: 20,
                fill: 'green',
                stroke: null,
                strokeWidth: 1,
                strokeDashArray: null,
                strokeLineCap: 'butt',
                strokeLineJoin: 'miter',
                strokeMiterLimit: 10,
                scaleX: 1,
                scaleY: 1,
                angle: 45,
                flipX: false,
                flipY: false,
                opacity: 1,
                shadow: null,
                visible: true,
                clipTo: null,
                backgroundColor: '',
                fillRule: 'nonzero',
                globalCompositeOperation: 'source-over',
                transformMatrix: null,
                skewX: 0,
                skewY: 0,
                rx: 0,
                ry: 0
            }

            this.setAddingObjectL({ object: newObject });
            this.addObject({ object: newObject });
          }
        },
        mouseMove(opts) {
            console.log(this.canvas.objects);
            if(this.isAddingObject){
                let obj = this.canvas.objects[this.canvas.objects.length - 1];
                let diffX = opts.e.offsetX - obj.left;
                let diffY = opts.e.offsetY - obj.top;
                // this for circle with snapping option
                //obj.radius = Math.max(obj.radius + (opts.e.movementX + opts.e.movementY) / 2, 0);
                if(diffX < 0)
                    obj.originX = 'right';
                else obj.originX = 'left'
                    if(diffY < 0) obj.originY = 'bottom';
                    else obj.originY = 'top'

                    obj.width = Math.max(Math.abs(diffX), 1);
                    obj.height = Math.max(Math.abs(diffY), 1);

                    console.log(diffX,diffY);
                }
            },
        syncCanvasL(canvas) {
            this.syncCanvas(canvas)
        },
        setAddingObjectL(val) {
            this.setAddingObject(val);
        }
    }
};
</script>

<style lang="stylus" scoped>
h2
    margin-top 50%
    font-size 46px
    font-weight 500

</style>
